<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>08_jQuery-和原生的区别</title>
  <!-- 
  jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，旨在简化 HTML 文档遍历和操作、事件处理、动画以及 Ajax 交互。尽管 jQuery 提供了许多便利，但与原生 JavaScript（也称为 Vanilla JavaScript）相比，它们在使用上有一些显著的区别。
  一、语法和简洁性
   1. 选择器
  - jQuery：使用 CSS 选择器语法，简洁且易于理解。
  $('#myElement'); // 选择 ID 为 myElement 的元素
    $('.myClass'); // 选择类名为 myClass 的元素
  - 原生 JavaScript：使用  `document.getElementById()`  或  `document.querySelector()`  方法。
  document.getElementById('myElement'); // 选择 ID 为 myElement 的元素
    document.querySelector('.myClass'); // 选择类名为 myClass 的元素
   2. 事件处理
  - jQuery：使用  `on()`  方法来绑定事件，语法简单。
  $('#myElement').on('click', function() {
        alert('元素被点击了！');
    });
  - 原生 JavaScript：使用  `addEventListener()`  方法，语法稍显复杂。
  document.getElementById('myElement').addEventListener('click', function() {
        alert('元素被点击了！');
    });
  二、功能和性能
   1. 动画效果
  - jQuery：提供内置的动画效果方法，如  `fadeIn()` 、 `fadeOut()` 、 `slideUp()`  等。
  $('#myElement').fadeIn();
  - 原生 JavaScript：需要使用 CSS 动画或手动编写动画逻辑，通常较为繁琐。
  const element = document.getElementById('myElement');
    element.style.opacity = 0;
    // 需要手动编写动画逻辑
   2. Ajax 请求

  - jQuery：提供简洁的 Ajax 方法，如  `$.ajax()` 、 `$.get()` 、 `$.post()`  等。
  $.ajax({
        url: 'example.com/api',
        method: 'GET',
        success: function(data) {
            console.log(data);
        }
    });
  - 原生 JavaScript：使用  `XMLHttpRequest`  或  `fetch`  API，语法较为复杂。
  fetch('example.com/api')
        .then(response => response.json())
        .then(data => console.log(data));
  三、兼容性和依赖性
   1. 浏览器兼容性
  - jQuery：自动处理不同浏览器之间的兼容性问题，开发者无需担心。

  - 原生 JavaScript：某些特性在旧版浏览器中可能不兼容，开发者需要手动处理兼容性。

   2. 依赖性
  - jQuery：需要引入 jQuery 库文件，增加了页面的加载时间。

  - 原生 JavaScript：不需要任何库，直接使用浏览器内置的 JavaScript。

  四、总结
  - 语法简洁性：jQuery 提供了更简洁的语法来处理常见操作，而原生 JavaScript 语法相对较复杂。
  - 功能丰富性：jQuery 提供了许多内置功能，如动画和 Ajax 请求，而原生 JavaScript 需要手动实现。
  - 兼容性：jQuery 自动处理浏览器兼容性，而原生 JavaScript 可能需要开发者手动处理。
  - 依赖性：使用 jQuery 需要引入库文件，而原生 JavaScript 不需要额外的依赖。

  总体来说，jQuery 可以提高开发效率，尤其是在处理 DOM 操作和事件时，但在现代开发中，随着原生 JavaScript 的不断发展（如 ES6+ 的引入），许多 jQuery 的功能也可以通过原生 JavaScript 实现，因此在选择使用 jQuery 还是原生 JavaScript 时，开发者可以根据项目需求和个人习惯来决定。
  -->
</head>
<body>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.获取jQuery对象
    console.log(jQuery('body'))
    // 2.获取DOM Element对象
    console.log('%O', document.querySelector('body'))

  </script>
  
</body>
</html>